<!--
 * @Author: dengyongliang
 * @Date: 2021-04-14 16:12:55
 * @LastEditTime: 2021-08-18 14:36:25
 * @LastEditors: dengyongliang
 * @Description:
-->
<template>
  <div class="si-upload">
    <el-upload
      ref="si-upload"
      v-bind="upload"
      :on-preview="handlePicturePreview"
      :on-exceed="onExceedLimit"
      :http-request="handleSuccess"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'SiUpload',
  props: {
    // 上传组件
    upload: {
      type: Object,
      default: function() {
        return {
          // action地址
          action: '',
          // 上传数量限制
          limit: 5,
          // 上传类型
          accept: '.JPG,.png,.GIF',
          // 文件列表的类型
          listType: 'picture-card',
          httpRequest: () => {}
        }
      }
    }
  },
  data() {
    return {
      // fileList: [],
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  // inject: ['handleUpload'],
  watch: {
    // upload: {
    //   handler(newVal, oldVal) {
    //     console.log(newVal.fileList)
    //     this.fileList = this.upload.fileList
    //   },
    //   immediate: true,
    //   deep: true
    // }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.fileList = this.upload.fileList
    // })
  },
  methods: {
    handleSuccess(file) {
      this.upload['http-request'](file)
    },
    onExceedLimit(file, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.upload.limit} 个文件，本次选择了 ${file.length} 个文件`
      )
    },
    handlePicturePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.si-upload /deep/ .is-disabled + .el-upload {
  display: none !important;
}
</style>
